<html>
<head>
<title>Validation Tooltip</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!--<link href="style.css" rel="stylesheet" type="text/css">-->
<script type="text/javascript" src="./js/jquery1.min.js"></script>
<script type="text/javascript" src="./js/jquery.validate.js"></script>
<script type="text/javascript">

$(document).ready(function() {
	$("#form_holder").mouseover(function(){
     //generateTooltips ();
    });

	// validate the contact form
	$("#contactForm").validate({
		rules: {
			input_name: {required: true, minlength: 2},
			input_email: {required: true,  email: true},
			input_combo: {required: true}
		},
		messages: {
			input_name: "This is require",
			input_email: "<img id='emailerror' src='cross.png' height='10' width='10' hovertext='You must enter a valid email address.' />",
			input_combo: "<img id='emailerror' src='cross.png' height='10' width='10' hovertext='You must enter a valid email address.' />"
		},

		invalidHandler: function(form, validator) {
						  var errors = validator.numberOfInvalids();
						  if (errors) {
								for (var i=0; i < validator.errorList.length; i++){
										//HERE YOU COULD PRINT OUT ALL YOUR ERRORS TO A DIV ETC
								}
							return false;
						  }
		},
		success:function(label){
			label.html("<img src='right.jpg' height='10' width='10' alt='Valid'>");
		},
		errorPlacement: function(error, element) { 
			error.insertAfter(element);
			//generateTooltips();
		},
		
		//override default onfocusout of validation plugin
		onfocusout: function(element) {
						if ( !this.checkable(element) && (element.name in this.submitted || !this.optional(element)) ) {
							this.element(element);
						}			
		},
		highlight: function(element, errorClass) {
			 $(element).fadeOut("fast", function() {
			   $(element).fadeIn("fast")
			 })
		}
	});

		//function to generate tooltips

		function generateTooltips() {

		  //make sure tool tip is enabled for any new error label

			$("img[id*='error']").tooltip({
				showURL: false,
				opacity: 0.99,
				fade: 150,
				positionRight: true,
				bodyHandler: function() {
				return $("#"+this.id).attr("hovertext");
					}
			});

			//make sure tool tip is enabled for any new valid label

			$("img[src*='tick.gif']").tooltip({
				showURL: false,
					bodyHandler: function() {
						return "OK";
					}
			});
		}
});
</script>
</head>
<body>
<div id="page">
  <div id="form_holder"> 
  <img id="logo" src="" title="SDinternet - web development &amp; marketing" />
    <form id="contactForm" name="contactForm" action="test.php" method="post">
      <fieldset id="contact_form">
      <legend> <span>Contact Form</span> </legend>
      <ul>
      	 <li id="combo_name"> 
          <label for="input_combo" title="Name">select Name:</label>
          <select name="input_combo" id="input_combo">
          	<option></option>
          	<option>alka</option>
          	<option>nety</option>
          	<option>om</option>
          	<option>veer</option>
          </select>
           </li>
        <li id="name_holder"> 
          <label for="input_name" title="Name">Name:</label>
          <input name="input_name" id="input_name" type="text">
           </li>
        <li id="email_holder"> 
          <label for="input_email" title="Email">Email:</label>
          <input name="input_email" id="input_email" type="text">
          </li>
        <li id="telephone_holder"> 
          <label for="input_telephone" title="Telephone">Telephone:</label>
          <input name="input_telephone" id="input_telephone" type="text">
        </li>
        <li id="submit_holder"> 
          <input name="Submit" type="submit">
        </li>
      </ul>
      </fieldset>
    </form>
  </div>
</div>
</body>
</html>